<template>
	<view class="form-container" style="border: 2rpx solid black;">

		<carHeader :title="'申请提现'"></carHeader>

		<view class="rongqi">
			<view class="rongqi1">
				<view class="" style="height: 20rpx;">

				</view>
				<view class="yue" style="display: flex;margin-top: 40rpx;">
					<view>
						账户余额 :
					</view>
					<view style="margin-left: 170rpx;  color: red;">
						￥ {{nowMoney}}
					</view>
				</view>
				<view class="form-item">
					<text class="label">提现金额 :</text>
					<input class="input1" v-model="form.cashWithdrawal" type="number" placeholder-style="color: #ccc" />
					<text class="unit">元</text>
				</view>
				<view class="form-item">
					<text class="label">真实姓名 :</text>
					<input class="input2" v-model="form.realName" placeholder-style="color: #ccc" />
				</view>
				<view class="form-item">
					<text class="label">请选择银行:</text>
					<picker class="picker" v-model="form.bank" mode="selector" :range="bankOptions" range-key="label"
						@change="handleBankChange">
						<view class="picker-value" :class="{ 'picker-placeholder': !selectedBank }">
							{{ selectedBank || ' 请选择银行' }}
						</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">请输入银行卡号 :</text>
					<input class="input3" v-model="form.bankCardNumber" placeholder-style="color: #ccc" />
				</view>
				<view style="font-size: 18rpx; text-align: center; color: #b4b4b4;">
					车联网服务平台不会通过任何渠道泄露您的个人信息,请放心填写
				</view>
				<view class="">
					<button class="submit-button" @click="tj">确认信息并提交</button>
				</view>
				<view class="" style="height:40rpx;">

				</view>
			</view>
		</view>

		<view class="rongqi2">
			<view class="jilu">
				提现记录
			</view>
			<!-- <view class="xiangqing">
				<view class="" style="margin-top: 10rpx;">
					<view class="a1" style="font-weight: 600;">
						商家提现申请
					</view>
					<view class="a2" style="font-size: 20rpx; color: #b4b4b4;">
						核销时间:2022-10-12 11 : 09
					</view>
				</view>
				<view class="" style="margin-left: 180rpx; margin-top: 10rpx;">
					<view class="a3" style="color: red;">
						{{item.money}}
					</view>
					<view class="a4" style="color: #b4b4b4;margin-left: 20rpx;">
						审核中
					</view>
				</view>
			</view> -->

			<block v-for="(item, index) in tixianItems" :key="index">
				<view class="xiangqing">
					<view class="" style="margin-top: 10rpx;">
						<view class="a1" style="font-weight: 600;">
							商家提现申请
						</view>
						<view class="a2" style="font-size: 20rpx; color: #b4b4b4;">
							提现时间:{{item.withdrawalRecord}}
						</view>
					</view>
					<view class="" style="margin-left: 180rpx; margin-top: 10rpx;">
						<view class="a3" style="color: red;">
							-{{item.cashWithdrawal}}
						</view>
						<view class="a4" style="color: #b4b4b4;margin-left: 20rpx;">
							<span v-if="item.txStatus == 0">审核中</span>
							<span v-if="item.txStatus == 1"> 审核通过</span>
							<span v-if="item.txStatus == 2">审核不通过</span>
						</view>
					</view>
				</view>
			</block>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{//填写的数据
					cashWithdrawal:null,
					realName:'',
					bank:'',
					bankCardNumber:'',
					merchantId:1,
				},
				bankOptions: [{//银行卡下拉框选项
						value: 'ICBC',
						label: '工商银行'
					},
					{
						value: 'CMB',
						label: '招商银行'
					},
					{
						value: 'ABC',
						label: '农业银行'
					}
				],
				selectedBank: null,//选中的银行卡
				items: [{
						money: '- 100.00',
						time: '2022-10-12 11 : 09',
						statis: '审核中'
					},
					{
						money: '- 100.00',
						time: '2022-10-12 11 : 09',
						statis: '审核中'
					}
				],
				nowMoney:0,//账户余额
				shopId:1,//商户id
				tixianItems:[],//提现列表
				// 标记表单是否验证通过  
				isFormValid: false, 
			};
		},
		created() {
			this.getDetailInfo();
			this.getTiXianInfo();
		},
		methods: {
			//获取订单和提现的列表
			getDetailInfo(){
				uni.request({
					url:"http://localhost:8080/shop/transaction/details",
					method:'GET',
					data:{
						shopId:this.$global.shopId
					},
					success:(res)=> {
						console.log(res.data);
						this.items=res.data.rows;
						this.nowMoney=(this.calculateTotalMoney(this.items)).toFixed(2);
					},
					fail:(err)=> {
						console.log('获取信息失败:', err);
					}
				})
			},
			// 获取提现列表
			getTiXianInfo(){
				uni.request({
					url:"http://localhost:8080/shop/tixian/listById",
					method:'GET',
					data:{
						shopId:this.$global.shopId
					},
					success:(res)=> {
						console.log('提现列表:',res.data);
						this.tixianItems=res.data.rows;
                        this.tixianItems.forEach(tixianItem=>{
							tixianItem.cashWithdrawal=tixianItem.cashWithdrawal.toFixed(2);
						})
					},
					fail:(err)=> {
						console.log('获取提现信息失败:', err);
					}
				})
			},
			// 计算当前现金余额
			calculateTotalMoney(records) {
			      let total = 0;  
			      records.forEach(record => {  
			        total += record.amount;  
			      });  
			      return total;  
			},  
			// 下拉框选择的银行卡
			handleBankChange(e) {
				this.form.bank = this.bankOptions[e.mp.detail.value].label;
				this.selectedBank=this.bankOptions[e.mp.detail.value].label;
				console.log(this.selectedBank);
				console.log(this.form.bank);
			},
			// 表单验证函数  
			validateForm() {  
			    this.isFormValid =   
			    this.form.realName.trim() !== '' && // 真实姓名不能为空  
			    this.form.bank.trim() !== '' && // 银行名称不能为空  
			    this.form.bankCardNumber.trim() !== '' && // 银行卡号不能为空  
			    (!isNaN(parseFloat(this.form.cashWithdrawal)) && isFinite(this.form.cashWithdrawal)) // 金额必须为有效数字  
			    ;  
			    return this.isFormValid;  
			},  
			// 点击按钮发送请求，跳转页面
			tj() {
				// 如果验证不通过，返回
				if (!this.validateForm()) {  
				    uni.showToast({ title: '填写不完整或格式错误', icon: 'none' });  
				    return;  
				}  
				// 发送数据到后端
				uni.request({
					url:'http://localhost:8080/shop/tixian/addTiXian',
					method:'POST',
					data:this.form,//发送的数据
					success: (res) => {
						console.log('数据发送成功', res.data);
						uni.navigateTo({
							url: "/pages/jiesuan/jiesuan"
						})
					},
					fail: (err) => {
						console.error('数据发送失败', err);
						uni.showToast({ title: '网络请求失败', icon: 'none' });  
					}
				})
				
			}
		}
	};
</script>

<style>
	.rongqi {
		width: 94%;
		/* border: 5rpx solid black; */
		margin-left: 20rpx;
		background-color: white;
		position: relative;
		top: -200rpx;
		border-radius: 45rpx;
	}

	.rongqi1 {
		width: 90%;
		/* border: 5rpx solid black; */
		margin-left: 30rpx;
		/* margin-top: 80rpx; */
	}

	.form-item {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.label {
		width: 220rpx;
		/* text-align: right; */
		margin-right: 20rpx;

	}

	.input1,
	.input2,
	.input3,
	.picker-value {
		width: 310rpx;
		border: 2rpx solid #eee;
		border-radius: 60rpx;
		margin-left: 50rpx;
		border: 1px solid #ccc;
	}


	.unit {
		margin-left: 10rpx;
	}

	.picker-value {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;

		position: relative;
		/* padding-right: 20rpx; */
		/* 为下拉箭头留出空间 */
	}

	.picker-placeholder {
		color: #ccc;
	}

	.picker-value::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 55rpx;
		transform: translateY(-50%);
		border-left: 5rpx solid transparent;
		border-right: 5rpx solid transparent;
		border-top: 10rpx solid #ccc;
	}

	.submit-button {
		width: 70%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #0055ff;
		color: #fff;
		font-size: 26rpx;
		margin-top: 30rpx;
		border-radius: 45rpx;
	}

	.jilu {
		height: 70rpx;
		border-bottom: 3rpx solid #eee;
		line-height: 70rpx;
		font-size: 32rpx;
		font-weight: 600;
		margin-top: 10rpx;
	}

	.rongqi2 {
		width: 94%;
		margin-left: 16rpx;
		background-color: white;
		border-radius: 40rpx;
		border: 4rpx solid white;
		position: relative;
		top: -160rpx;
	}

	.xiangqing {
		display: flex;
		border-top: 4rpx solid #eee;
		border-radius: 15rpx;
	}
</style>